<template>
    <div :class="['uap-card', shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow']">
        <div
            class="uap-card-header"
            v-if="$slots.header || header">
            <slot name="header">{{header}}</slot>
        </div>
        <div class="uap-card-body" :style="bodyStyle">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'UapCard',
    props: {
        header: {
            type: String,
            default: '',
        },
        bodyStyle: {},
        shadow: {
            type: String,
            default: '',
        }
    },
    mounted() {
        console.log(this.$slots)
    }
}
</script>

<style lang="scss" scoped>
.uap-card{
    border-radius:4px;
    border:1px solid #EBEEF5;
    background-color:#FFF;
    overflow:hidden;
	color:#303133;
    transition:.3s;
    .uap-card-header{
        box-sizing:border-box;
        padding:18px 20px;
        border-bottom:1px solid #EBEEF5;
    }
    .uap-card-body{padding:20px}
}
.is-always-shadow,.is-hover-shadow:focus,.is-hover-shadow:hover{
    box-shadow:0 2px 12px 0 rgba(0,0,0,.1);
}
</style>
